<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form style="height:100%;">
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="$comi18('rxDialog.name', '标题')">
                        <a-input v-model="title" style="width: 80%"></a-input>
                    </a-form-item>
                    <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('multipleChoice','多选')">
                        <a-switch size="small" v-model="settings.multiSelect"/>
                    </a-form-item>
                    <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="$comi18('formDef.valueSource', '值来源')">
                        <a-radio-group :options="fromOptions" v-model="from"/>
                    </a-form-item>
                    <a-row v-show="from=='dic'">
                        <a-col :span="24">
                            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('dataDicItem','数据字典项')">
                                <rx-input-button v-model="dicKeyTitle"
                                                 @click="selectDic"
                                                 style="width: 100%;">
                                </rx-input-button>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="from=='sql'">
                        <a-col :span="24">
                            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('customSQL','自定义SQL')">
                                <rx-input-button ref="sql" @click="openCustomQuery"  v-model="sql" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="from=='sql'">
                        <a-col :span="12">
                            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('textField','文本字段')">
                                <a-select :options="sqlFields" v-model="sql_textfield" :getPopupContainer="(p)=>p.parentNode"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('numField','数值字段')">
                                <a-select :options="sqlFields" v-model="sql_valuefield" :getPopupContainer="(p)=>p.parentNode"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="from=='sql'">
                        <a-col :span="24">
                            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.parentField','父字段')">
                                <a-select :options="sqlFields" v-model="sql_parentfield" :getPopupContainer="(p)=>p.parentNode"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="from=='sql'">
                        <a-col :span="24">
                            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('list.paramConfig','参数配置')">
                                <rx-grid :columns="paramsColumns"
                                         :dataSource="paramsData"
                                         ref="params"
                                         :showPage="false"
                                         style="height:200px;"
                                         :bordered="true">
                            <span slot="bindVal" slot-scope="{text,record,index}">
                              <a-select v-model="record.bindVal" :options="queryAry" :getPopupContainer="(p)=>p.parentNode"/>
                            </span>
                                </rx-grid>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="from=='grant'">
                        <a-col :span="24">
                            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('list.permissType','权限类型')">
                                <rx-input-button ref="grant" @click="openFormEntityDataType" v-model="grant" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('defValue','默认值')">
                        <a-input v-model="value"></a-input>
                    </a-form-item>
                </a-form>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import filter from "./filter";
import {Dialog} from "@lowcode/jpaas-common-lib";
import FormApi from "@/views/modules/form/core/js-comps/api/FormApi";

export default {
    name: "tree-filter",
    mixins: [filter],
    data() {
        return {
            from: "dic",
            fromOptions: [
                {'value': 'dic', 'label': this.i18n('dataDictionary','数据字典')},
                {'value': 'sql', 'label': this.i18n('customSQL','自定义SQL')},
                {'value': 'grant', 'label': this.i18n('form.permissData','权限数据')}],
            //数据字典
            dicKey:"",
            dicKeyTitle:"",
            //自定义查询
            sql:"",
            sql_textfield:"",
            sql_valuefield:"",
            sql_parentfield:"",
            paramsColumns:[
                {title: this.i18n('form.paramName','参数名'), dataIndex: 'comment', width: 120},
                {title: this.i18n('form.bindValue','绑定值'), dataIndex: 'bindVal', width: 120,scopedSlots: {customRender: 'bindVal'}}
            ],
            paramsData:[],
            sqlFields:[],
            queryAry:[],
            //权限数据
            grant:""
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"codeGenSetting",key);
        },
        //初始化配置
        initSetting() {
            if(this.row.settings){
                this.settings =this.row.settings;
                this.from=this.settings.from;
                //数据字典
                if(this.settings.from=="dic"){
                    this.$set(this,"dicKey",this.settings.dicKey);
                    this.$set(this,"dicKeyTitle",this.settings.dicKeyTitle);
                }
                //自定义查询
                else if(this.settings.from=="sql"){
                    if(this.settings.sql){
                        this.$set(this,"sql",this.settings.sql);
                        this.$set(this,"sql_textfield",this.settings.sql_textfield);
                        this.$set(this,"sql_valuefield",this.settings.sql_valuefield);
                        this.$set(this,"sql_parentfield",this.settings.sql_parentfield);
                        this.$set(this,"paramsData",this.settings.paramsData);
                        var sql=JSON.parse(this.settings.sql);
                        FormApi.getByKey({key: sql.value}).then(res=>{
                            if(res.data){
                                this.loadFields(res.data);
                            }
                        });
                    }
                }
                //权限数据
                else if(this.settings.from=="grant"){
                    this.$set(this,"grant",this.settings.grant);
                }
            }else {
                this.settings = {
                    from: "dic",
                    multiSelect: false,
                }
            }
            for (let i = 0; i < this.paramMappings.length; i++) {
                this.queryAry.push({
                    label:this.paramMappings[i].label,
                    value:this.paramMappings[i].key,
                    type:this.paramMappings[i].type
                });
            }
        },
        //获取配置
        getSetting(){
            this.settings.from=this.from;
            if(this.settings.from=="dic"){
                this.$set(this.settings,"dicKey",this.dicKey);
                this.$set(this.settings,"dicKeyTitle",this.dicKeyTitle);
            }else if(this.settings.from=="sql"){
                this.$set(this.settings,"sql",this.sql);
                this.$set(this.settings,"sql_textfield",this.sql_textfield);
                this.$set(this.settings,"sql_valuefield",this.sql_valuefield);
                this.$set(this.settings,"sql_parentfield",this.sql_parentfield);
                this.$set(this.settings,"paramsData",this.paramsData);
            }else if(this.settings.from=="grant"){
                this.$set(this.settings,"grant",this.grant);
            }
            return this.settings;
        },
        selectDic(vm){
          var conf = {
            curVm: this, data: {allowTree:true,isFull:false}, widthHeight: ['800px', '600px'],
          }
          let self_ = this;
          Dialog.openSysDicDialog(conf,function (curVue, row) {
            self_.dicKey = row.alias;
            self_.dicKeyTitle = self_.$i18(row.name,"名称");
            vm.setVal(self_.dicKey,self_.dicKeyTitle);
          })
        },
        openCustomQuery(vm){
            Dialog.openCustomDataDialog({
                curVm: this, widthHeight: ['1200px', '600px']
            }, function (self, data) {
                self.loadFields(data);
                vm.setVal(data.key,data.name);
            })
        },
        loadFields(row){
            var fieldStr=row.resultField;
            var whereStr=row.whereField;
            if(whereStr){
                let self=this;
                var fields = JSON.parse(whereStr);
                fields.map(function(item){
                    if(item.valueSource=='param') {
                        var params=self.paramsData.find(obj => obj.fieldName==item.fieldName );
                        if(!params){
                            self.paramsData.push(Object.assign(item,{bindVal:""}));
                        }
                    }
                })
            }
            if(fieldStr) {
                var fileds = JSON.parse(fieldStr);
                var ary = fileds.map(function (item) {
                    return {
                        value: item.fieldName,
                        label: item.comment
                    }
                })
                this.sqlFields = ary;
            }
        },
        openFormEntityDataType(vm){
            var self=this;
            var config={curVm:this,widthHeight:['800px','600px'],data:{multiSelect:false}};
            Dialog.openFormEntityDataTypeDialog(config,function(ary){
                var data=ary[0];
                vm.setVal(data.id,data.name);
            })
        },
    },
    watch: {}
}
</script>

<style scoped>
</style>